<template>
  <div class="goods-info" v-if="Object.keys(detailInfo).length !== 0">
     <div class="info-desc">
       <div class="start"></div>
       <div class="desc">{{detailInfo.desc}}</div>
       <div class="end"></div>
     </div>
     <div class="info" v-for="(item1,index) in detailInfo.detailImage" :key="index">
       <div class="info-key" v-if="item1.key">{{item1.key}}</div>
       <div class="info-list" v-if="item1.list">
         <img v-for="(item2,index) in item1.list" :key="index" v-lazy="item2" alt="" @load="imgLoad">
       </div>
     </div>
  </div>
</template>

<script>
export default {
  name:"DetailGoodsInfo",
  // data(){
  //   return {
  //     count:0,
  //     imgLength:0
  //   }
  // },
  props:{
    detailInfo:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  // watch:{
  //   detailInfo(){
  //     this.detailInfo.detailImage.forEach(value => {
  //       if(value.list){
  //         this.imgLength = value.list.length
  //       }
  //     })
  //   }
  // },
  methods:{
    imgLoad(){
      // if(++this.count === this.imgLength){
        this.$emit('imgLoad')
      // }
    }
  },
}
</script>

<style scoped>
  .goods-info {
    width: 100%;
    padding: 20px 0;
    border-bottom: 5px solid #f2f5f8;
  }

  .info-desc {
    padding: 10px 15px;
  }
   
   .info-desc .start,
   .info-desc .end {
     width: 33.33%;
     height: 1px;
     position: relative;
     background-color: #a3a3a5;
   }

   .info-desc .start {
     float: left;
   }

   .info-desc .end {
     float: right;
   }

   .info-desc .start::before ,
   .info-desc .end::after{
     content: '';
     width: 8px;
     height: 8px;
     position: absolute;
     bottom: 0;
     background-color: #333;
   }

    .info-desc .end::after {
      right: 0;
    }

   .info-desc .desc {
     padding: 15px 0;
     font-size: 18px;
   }

   .info .info-key {
     padding: 10px 15px;
     font-size: 20px;
     color: #333;
   }

   .info-list {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
   }

  .info .info-list img {
    width: 100%;
    padding-bottom: 5px;
  }
</style>

